<template>
	<view class="" style="">


		<view class="b">
			<view class="bl">
				<image src="/static/dingdan_imgs/loc.png" mode="heightFix" style="height: 24px;width: 15px;"></image>
			</view>
			<view class="br">
				<view class="bru">
					<view class="brul">
						收货人:摸鱼酱
					</view>
					<view class="brur">
						18226180501
					</view>
				</view>
				<view class="brd">
					收货地址:上海上海市闵行区浦江镇江龙路满香园4号902室
				</view>
			</view>
		</view>
		<view class="line">
			<image src="/static/dingdan_imgs/line.png" mode="heightFix" style="height: 5px;"></image>
		</view>
		<view class="" style="margin-left: 20rpx;margin-bottom: 20rpx;">
			<van-radio-group :value="radio" bind:change="onChange">
				<van-radio name="1" shape="square">鲜花专卖店</van-radio>

			</van-radio-group>
		</view>
		<view class="body" v-for="item in displayList" :key="item.id">
			<!-- 订单号 -->
			<view class="body-head">
				<view>订单号:{{item.id}}</view>
				<view>等待付款</view>



			</view>
			<!-- 中间图片和介绍 -->
			<view class="body-middle" @click="detail" :data-order="item">
				<!-- 左边图片 -->
				<view class="body-middle-left">
					<image :src="item.src"></image>
				</view>
				<!-- 右边介绍 -->
				<view class="body-middle-right">
					<!-- 商品名 -->
					<view class="body-middle-right-name">{{item.name}}</view>
					<view class="body-middle-right-price">
						<view class="body-middle-right-price1">{{item.price}}</view>
						<view class="body-middle-right-price2">×1</view>
					</view>
				</view>
			</view>


		</view>
		<view class="d">
			<view class="dl">
				配送方式
			</view>
			<view class="dr">
				快递 配送
			</view>
		</view>
		<view class="e">
			<view class="el">
				我的留言:尽快发货!
			</view>
		</view>


		<van-cell-group>
			<van-cell>
				<view>
					共一件商品 小计：1000元
				</view>
			</van-cell>
			<van-cell title="快递配送费:0" />
			<van-cell title="优惠券折扣:0" />
			<van-cell title="积分抵扣:0" />
		</van-cell-group>


		<view class="" style="position: absolute ;right: 30rpx;">
			<text style="margin-right: 100rpx;">合计100元</text>
			<van-button type="info" @click="showPopup">提交订单</van-button>
		</view>



		<van-popup position=" bottom" :show="show" @close="onClose">
			<view style="width: 750rpx;">
				<view @click="onClick1()" style="height: 80rpx; border: 1rpx #DCDCDC solid; text-align: center;line-height:80rpx;
			font-size: 40rpx;">
					微信支付
				</view>
				<view @click="onClick1()" style="height: 80rpx; border: 1rpx #DCDCDC solid; text-align: center;line-height:80rpx;
			font-size: 40rpx;">
					支付宝支付
				</view>
				<view style="height: 80rpx;background-color: #DCDCDC; border: 1rpx #DCDCDC solid;color: #FFFFFF; text-align: center;line-height:80rpx;margin-top: 30rpx;
			font-size: 40rpx;" @click="onClose()">取消</view>

			</view>
		</van-popup>

		<van-popup :show="show1" @close="onClose1">
			<view>
				<view id="m1" style="width: 600rpx;height: 450rpx;margin-top: 10rpx;">
					<view id="m2"
						style="background-color: #FFFFFF; width: 600rpx;height: 90rpx;position: relative;top: 334rpx;">
						<view style="margin-left: 50rpx;">1</view>
						<view>1</view>
						<view>1</view>
						<view>1</view>
						<view>1</view>
						<view>1</view>
					</view>
				</view>

				<view style="margin-top: 300rpx; " id="m3">
				<view>1</view>
				<view>2</view>
				<view>3</view>
				<view>4</view>
				<view>5</view>
				<view>6</view>
				<view>7</view>
				<view>8</view>
				<view>9</view>
				<view> </view>
				<view>0</view>
				<view><image style="width: 50rpx;height: 50rpx;" src="../../static/apply_for_refund/shanchu.png" mode=""></image></view>
				
				</view>
			</view>


		</van-popup>
	</view>
	</view>
</template>

<script>
	var that
	var orderList = getApp().globalData.m
	export default {
		data() {
			return {
				show: false,
				show1: false,
				radio: 1,
				b: 2,
				order_state: [{
						id: 0,
						name: "全部",
						isActive: true
					},
					{
						id: 1,
						name: "代付款",
						isActive: false
					},
					{
						id: 2,
						name: "待发货",
						isActive: false
					},
					{
						id: 3,
						name: "待收货",
						isActive: false
					},
					{
						id: 4,
						name: "待评价",
						isActive: false
					}
				],
				displayList: [],
				index: 0
			};
		},
		methods: {
			getId(e) {
				this.displayList = []
				let {
					index
				} = this
				index = e.currentTarget.dataset.index
				this.order_state.forEach((v, i) => i == index ? v.isActive = true : v.isActive = false);
				if (index == 0) {
					this.displayList = orderList
				} else {
					for (var i = 0; i < orderList.length; i++) {
						let str = orderList[i].state
						if (index == str) {
							this.displayList.push(orderList[i])
						}
					}
				}
			},
			showPopup() {
				this.show = true
			},
			onClick() {
				this.show = true
			},
			onClick1() {
				this.show1 = true
			},
			onClose() {
				this.show = false
			},
			onClose1() {
				this.show1 = false
			},
			detail(e) {
				let order = e.currentTarget.dataset.order
				wx.navigateTo({
					url: "../../other_pages/dingdan_detail/dingdan_detail?orderId=" + order.id
				})
			},
			cancle(e) {
				that = this
				let id = e.currentTarget.dataset.id
				wx.showModal({
					title: '取消订单',
					content: '确定要取消该订单吗？',
					success(res) {
						if (res.confirm) {
							setTimeout(function() {
								wx.showToast({
									title: '取消成功',
									icon: 'success',
									duration: 1000
								});
							}, 100)
							for (var i = 0; i < that.displayList.length; i++) {
								let str = that.displayList[i].id
								if (id == str) {
									that.displayList.splice(i, 1)
								}
							}
						}
					}
				})
			},
			urge() {
				wx.showToast({
					title: '催单成功',
					icon: 'success',
					duration: 1000
				})
				setTimeout(function() {
					wx.showToast({
						title: '商家已收到',
						icon: 'success',
						duration: 1500
					});
				}, 1300)

			},
			peisong() {
				wx.navigateTo({
					url: "../../other_pages/peisong_detail/peisong_detail"
				})
			},
		},
		onLoad: function(option) {
			this.displayList = orderList
		},
		onShow() {
			this.displayList = orderList
			this.index = 0
			this.order_state.forEach((v, i) => i == this.index ? v.isActive = true : v.isActive = false);
		}
	}
</script>

<style>
	#m1 {
		background-image: url(../../static/apply_for_refund/nini.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}

	#m2 view {
		text-align: center;
		float: left;
		width: 80rpx;
		line-height: 80rpx;
		height: 80rpx;
		font-size: 60rpx;
		border: 1rpx #DCDCDC solid;
		border-radius: 5rpx;
	}
	#m3 view{
		text-align: center;
		width: 26vw;
		border: 1px #C8C9CC solid;
		line-height: 80rpx;
		font-size: 60rpx;
		color: #cccccc;
		float: left;
	}

	.b {
		height: 182rpx;
		position: relative;
		background-color: white;
	}

	.bl {
		position: absolute;
		left: 24rpx;
		top: 100rpx;
	}

	.bru {
		display: flex;
	}

	.brul {
		font-size: 30rpx;
		position: absolute;
		left: 80rpx;
		top: 30rpx;
	}

	.brur {
		font-size: 28rpx;
		position: absolute;
		left: 476rpx;
		top: 30rpx;
	}

	.brd {
		font-size: 28rpx;
		position: absolute;
		left: 80rpx;
		top: 100rpx;
	}

	.line {
		padding: 0vw 0 3vw 0;
		margin: -2vw 0 0 0;
	}

	.body {
		font-size: 13px;
		padding: 2vw 2vw 2vw 5vw;
		margin: 1vw 0 1vw 0;
		background-color: #dfe8ff9e;
	}

	.body-head {
		display: flex;
		justify-content: space-between;
		margin: 0 0 3vw 0;
	}

	.body-middle {
		display: flex;
	}

	.body-middle-left image {
		margin-right: 5vw;
		width: 20vw;
		height: 20vw;
	}

	.body-middle-right-name {
		width: 70vw;
		height: 10vw;
	}

	.body-middle-right-price {
		width: 70vw;
		height: 10vw;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.body-middle-right-price1 {
		font-size: 4vw;
		font-weight: 700;
	}

	.body-middle-right-price2 {
		margin: 0 2vw 0 0;
	}

	.body-bottom {
		margin: 2vw 0;
		text-align: right;
		font-size: 3.5vw;
	}

	.button {
		display: flex;
		justify-content: flex-end;
		font-size: 3vw;
	}

	.button1 {
		// width: 10vw;
		margin: 1vw 2vw 0 1vw;
		border-radius: 10px;
		color: #ff7979;
		padding: 1vw 3vw 1vw 3vw;
		background-color: #FEF3ED;
	}

	.button2 {
		// width: 10vw;
		margin: 1vw 2vw 0 1vw;
		border-radius: 15px;
		color: #FE0302;
		padding: 1vw 3vw 1vw 3vw;
		background-color: #fecaca;
	}

	.d {
		position: relative;
		border-top: 1px gainsboro solid;
		height: 88rpx;
		background-color: white;
	}

	.dl {
		font-size: 24rpx;
		position: absolute;
		left: 12px;
		top: 30rpx;
		align-items: center;
	}

	.dr {
		font-size: 24rpx;
		position: absolute;
		right: 24rpx;
		top: 30rpx;
		align-items: flex-end;
	}

	.e {
		border-top: 1px gainsboro solid;
		height: 88rpx;
		background-color: white;
		position: relative;
	}

	.el {
		font-size: 12px;
		position: absolute;
		left: 12px;
		top: 15px;
	}

	.f {
		position: relative;
		border-top: 1px gainsboro solid;
		height: 90px;
		background-color: white;
		font-size: 12px;
	}

	.fl {
		font-size: 12px;
		position: absolute;
		left: 12px;
		top: 15px;
		line-height: 20px;
	}

	.g {
		position: relative;
		border-top: 1px gainsboro solid;
		height: 44px;
		background-color: white;
	}

	.gr {
		font-size: 14px;
		position: absolute;
		right: 20px;
		top: 15px;
		color: coral;
	}

	.h {
		position: relative;
		border: 1px gainsboro solid;
		height: 56px;
		background-color: white;
		margin-top: 5px;
	}

	.hl {
		font-size: 12px;
		position: absolute;
		left: 10px;
		top: 10px;
		line-height: 20px;
	}
</style>
